<template>
	<view class="container">
		<template>
			<view class="confirm-page">
				<!-- <view class="wrap">
          <ProductCard :data="data" :type="type"></ProductCard>
        </view> -->


				<view class="detail">


					<!-- 前 更新优惠券选择 -->
					<view>
						<view class="head-content">
							<view class="headBox">
								<view class="textTop">
									<view>
										{{info.community.communityName}}
									</view>
									<view>
										￥{{info.community.communityFeeRmbYuan}}/{{info.community.communityYears}}年
									</view>
								</view>
								<view class="textBom">
									{{info.community.communityAddress || ''}}
								</view>

							</view>
						</view>

						<view class="checked-list">
							<view class="price-info" style="width: 100%;">
								<view class="head">
									<view class="title">{{info.teamLeader.teamLeaderName}}</view>
								</view>
								<view class="price-item coupon">
									<view class="info">
										<image class="icon" :src="$pictureBaseUrl + '/static/imgs/spell/icon-coupon.png'"
											mode="scaleToFill" />
										<view class="text">优惠券</view>
									</view>
									<view class="coupon-box">
										<view class="price"
											:style="{ display: info.teamLeader.couponObjectList.length == 0 ? 'block': 'none' }">
											无可选优惠券
										</view>
										<view class="price red" :style="{display: isCoupon ? 'block' : 'none'}">
											-￥{{ infoObj.canCouponAmountRmbYuan || 0 }}
										</view>
										<image class="icon" :src="$pictureBaseUrl + '/static/imgs/back-icon.png'" mode="scaleToFill"
											@tap.prevent.stop="openPick1(index)" />
									</view>
								</view>

								<view class="total">
									<view v-if="isCoupon">
										已优惠
										<text class="text">￥{{infoObj.canCouponAmountRmbYuan}}
										</text>
									</view>
									<view>
										小计￥{{isCoupon ? infoObj.payAmountRmbYuan : info.community.communityFeeRmbYuan}}
									</view>
								</view>

							</view>
						</view>
					</view>
					<!-- 前 更新优惠券选择 -->


					<view class="detail-header">
						<view class="detail-title">{{ data.title }}</view>
						<!--
            <view class="detail-price">￥{{ detail.originalPrice }}/小区</view>
            -->
					</view>
					<!--
          <view class="choose-box" @tap="openStudent">
            请选择加入{{ title }}的学员
            <image
                class="icon"
                :src="$pictureBaseUrl + '/static/imgs/back-icon.png'"
                mode="scaleToFill"
            />
          </view>
          -->
					<view class="checked-list">
						<view class="checked-item" v-for="item in studentList" :key="item.id">
							<view class="title">{{ item.name }}</view>
							<view class="delete-icon" @tap="deleteStudent(item)">
								<image class="icon" :src="$pictureBaseUrl + '/static/imgs/spell/icon-close.png'" mode="scaleToFill" />
							</view>
							<view class="price-info">
								<view class="price-item"
									:style="{display: item.equityCardList.length > 0 ? 'flex' : 'none',}">
									<view class="info">
										<image class="icon" :src="$pictureBaseUrl + '/static/imgs/spell/icon-number.png'"
											mode="scaleToFill" />
										<view class="text">权益卡</view>
									</view>
									<view class="price">-￥{{ item.courseEquityCardDiscountPrice }}</view>
								</view>
								<view class="price-item coupon">
									<view class="info">
										<image class="icon" :src="$pictureBaseUrl + '/static/imgs/spell/icon-coupon.png'"
											mode="scaleToFill" />
										<view class="text">优惠券</view>
									</view>
									<view class="coupon-box">
										<view class="price"
											:style="{display:item.couponList.length === 0? 'block' : 'none',}">
											无可选优惠券
										</view>
										<view class="price red"
											:style="{display: item.couponList.length !== 0 ? 'block' : 'none', }">
											-￥{{ item.useCouponPrice || 0 }}
										</view>
										<!-- <view
                         class="label"
                         :style="{
                     display:
                       currentCouponList.length > 0 && couponList.length === 0
                         ? 'block'
                         : 'none',
                   }"
                         @tap="openCoupon"
                     >可用优惠券({{ currentCouponList.length }})
                     </view
                     > -->
										<image :style="{display:item.couponList.length !== 0 ? 'block' : 'none',}" class="icon" :src="$pictureBaseUrl + '/static/imgs/back-icon.png'" mode="scaleToFill" />
									</view>
								</view>

								<view class="total">
									已优惠
									<text class="text">￥{{ totalStudentCouponPrice }}
									</text>
									小计￥{{ totalStudentPrice }}
								</view>
							</view>
						</view>
					</view>


					<view class="tips">
						购买时，如遇到拼班未成功的情况，相应的金额会自动原路退回，退款时间可能有几秒延迟，请耐心等候，支付时如网络状态不佳(如:网络超时)可退出查看拼班记录，请勿多次支付以免造成损失，如需帮助请联系客服。
					</view>

					<view class="tools">
						<!-- <view class="button cancel"><text class="text">健康豆支付</text></view> -->
						<view class="button confirm" @tap="toPay">确认支付</view>
					</view>

					<u-checkbox-group v-model="isAgree">
						<label class="agree">
							<u-checkbox name="1" shape="circle" activeColor="#00D66C">
							</u-checkbox>
							同意
							<text class="text">《家门口用户协议》</text>
						</label>
					</u-checkbox-group>
				</view>
				<!--        <Coupon
                    v-model="showCupon"
                    @success="setCoupon"
                    :list="couponList"
                    :maxChoose="studentList.length"
                    :dataList="currentCouponList"
                    :total="totalPrice"
                    :priceList="priceList"
                ></Coupon> -->
			</view>
		</template>
		<u-picker :show="showCoupon" :columns="couponColumns" keyName="couponName" @confirm="changeCoupon"
			@cancel="closeCoupon"></u-picker>
	</view>
</template>
<script>
	import ProductCard from "@/components/ProductCard";
	import Coupon from "@/components/Coupon";
	import common from "@/common/common.js";
	import tools from "@/common/utils/tools.js"
	import camp from "@/api/user/camp";
	import dayjs from "../../common/utils/dayjs";
	import coupon from "@/api/user/coupon";
	import trainee from "../../api/user/trainee";
	import spell from "../../api/spell";
	import order from "../../api/pay";
	import order_api from "@/api/group/order.js";
	import UPicker from "../../uni_modules/uview-ui/components/u-picker/u-picker.vue";

	export default {
		components: {
			UPicker,
			ProductCard,
			Coupon
		},
		data() {
			return {
				showCoupon: false,
				couponColumns: [],
				data: {
					title: "",
					status: "",
					labelText: "",
					labelInfo: "",
					dataList: [],
				},
				communityList: [],
				// pick状态列表
				pickStateList: [],
				courseId: 0,
				isAgree: [],
				showStudent: false,
				studentList: [], //已选择学员和优惠劵的数据
				showCupon: false,
				couponList: [],
				campTypeState: [],
				id: "",
				detail: {},
				currentCouponList: [],
				userId: "",
				userInfo: {},
				objectId: "",
				objectType: "",
				currentStudentList: [{
					studentIdCardName: 'test',
					studentBirthday: '2000-01-01',
					isEquityCard: 0
				}], //全部学员和优惠劵的数据
				discountPrice: "",
				equityDiscount: 0,
				couponDiscount: 0,
				totalPrice: 0,
				type: "camp",
				title: "",
				typeList: {
					spell: "拼班"
				},
				priceList: [],
				checkedList: [],
				// 优惠列表
				prefList: [],
				currentSelectCouponName: '', // 当前在选择优惠的优惠劵价格
				currentSelectCouponIndex: '', // 当前在选择优惠的优惠劵下标
				currentSelectCouponId: 0,
				// 当前在选择优惠的学员序号
				nowSelectIndex: -1,
				// 当前优惠选择pick的展开状态
				prefPickVisible: false,
				totalStudentPrice: 0,
				totalStudentCouponPrice: 0,
				addIds: '',
				info: {},
				infoObj: {},
				isCoupon: false,
				dataInfo: {}
			};
		},
		onLoad(options) {
			this.getUserStorage();
			console.log('options', options)
			this.addIds = options.addIds
			this.type = options.type
		},
		onShow() {
			// this.getCommunityList()
			this.getInfo()
			/*
			const pages = getCurrentPages();
			const current = pages[pages.length - 1];
			this.id = current.options.id;
			this.type = current.options.type || "camp";
			this.title = this.typeList[this.type];
			uni.setNavigationBarTitle({title: `加入${this.title}`});
			*/
			//this.init();

			//优惠劵下拉框列表
			//this.getCouponList();
		},
		computed: {
			compDefPickIndex() {
				return this.currentStudentList[this.nowSelectIndex]?.prefer || -1
			},
		},
		methods: {
			changeCoupon(e) {
				console.log(e, 'eeeeeee')

				this.infoObj = e.value[0]
				this.isCoupon = true
				this.showCoupon = false
			},
			closeCoupon() {
				this.showCoupon = false
			},
			getInfo() {
				let data = {
					teamLeaderId: uni.getStorageSync('teamLeaderId'),
					communityId: this.addIds
				}
				console.log(this.addIds, 'this.addIds')
				order_api.getPayPreviewByTeamLeaderIdAndCommunityId(data).then(res => {
					if (res.code === 0) {
						console.log(res, 'res1313123')
						this.info = res.data
						this.couponColumns = [res.data.teamLeader.couponObjectList]
						if(this.couponColumns[0].length > 0) {
							this.infoObj = this.couponColumns[0][0]
							this.isCoupon = true
						}
					}
				})

			},
			getCommunityList() {
				let data = {
					teamLeaderId: uni.getStorageSync('teamLeaderId'),
					communityId: this.addIds
				}

				order_api.getCommunityByTeamLeaderRegionalPage(data).then(res => {
					if (res.code === 0) {
						console.log(res, 'res1656')
					}
				})
			},
			openPick1() {
				console.log(this.info.teamLeader.couponObjectList.length, '选择优惠券')
				if(this.info.teamLeader.couponObjectList.length > 0) {
					this.showCoupon = true
				}
			},
			openPick(index) {
				this.prefList = [this.currentStudentList[index].couponList];
				if (this.prefList[0].length > 0) {
					this.prefPickVisible = true;
					this.nowSelectIndex = index;
				}
			},
			closePick() {
				this.nowSelectIndex = -1
				this.prefPickVisible = false
			},

			//选择下拉框
			changePickValue(e) {
				this.currentSelectCouponIndex = e.indexs[0];
				this.currentSelectCouponName = e.value[0].canCouponAmount;
				this.currentSelectCouponId = e.value[0].couponObjectId;
				this.currentStudentList = this.currentStudentList.map((item, index) => ({
					...item,
					useCouponPrice: this.nowSelectIndex == index ? e.value[0].canCouponAmount : item
						.useCouponPrice,
					useCouponObjectId: this.nowSelectIndex == index ? e.value[0].couponObjectId : item
						.useCouponObjectId
				}))
				this.closePick();
			},
			// 初始化字典,详情
			init() {
				console.log(this.type);
				if (this.type === "camp") {
					common
						.getDictData({
							type: "camp_type_state",
						})
						.then((res) => {
							this.campTypeState = res;

							this.getCampDetail();
						});
				} else if (this.type === "spell") {
					console.log(this.type, '====this.type')
					common
						.getDictData({
							type: "scheduling_state",
						})
						.then((res) => {
							this.campTypeState = res;

							this.getSpellDetail();
						});
				}
			},
			moneySum(val1, val2) {
				return tools.MoneySum(val1, val2)
			},
			// 去下单
			async toPay() {
				if (this.isAgree.length === 0) {
					uni.showToast({
						title: "请先同意用户协议!",
						duration: 2000,
						icon: "none",
					});
				} else {
					if (this.type === "camp") {
						this.dataInfo = await camp.createOrder({
							studentIds: this.studentList.map((item) => item.id).join(","),
							orderUsingProducts: 2,
							orderUsingProductsId: this.id,
							orderUsingProductsName: this.detail.studyCampName,
							couponId: this.couponList.map((item) => item.objectId).join(","),
							objectUserId: this.objectId,
						});
					} else if (this.type === "spell") {
						// data = await spell.createOrder({
						//   studentIds: this.studentList.map((item) => item.id).join(","),
						//   orderUsingProducts: 1,
						//   orderUsingProductsId: this.id,
						//   orderUsingProductsName: this.detail.schedulingName,
						//   couponId: this.couponList.map((item) => item.objectId).join(","),
						//   objectUserId: this.objectId,
						// });
						/*
						 * 确认支付
						 */
						this.dataInfo = await spell.insSchedulingOrder({
							objectUserId: this.objectId,
							courseReq: {
								orderUsingProducts: 1,
								orderUsingProductsId: this.id,
								orderUsingProductsName: this.detail.schedulingName,
							},
							objectUserStudentReqList: this.studentList.map(item => ({
								objectUserStudentId: item.id,
								couponObjectId: item.useCouponObjectId
							}))
						});
					} else if (this.type === "link_community") {
						this.dataInfo = await order_api.paidBoundHousingEstate({
							orderUsingProducts: 11,
							couponObjectId: Object.keys(this.infoObj).length == 0 ? null : this.infoObj
								.couponObjectId,
							payAmount: Object.keys(this.infoObj).length == 0 ? this.info.community
								.communityFee : this.infoObj.payAmount,
							communityId: Number(this.addIds)
						});
					}
					if (this.dataInfo.code === 0) {

						if (this.infoObj.payAmount == 0) {
							// 支付金额为0
							setTimeout(() => {
								// common.goTo(`/pages/group/order`);
								uni.redirectTo({
									url: '/pages/group/user'
								})
							}, 2000);
						} else {
							uni.redirectTo({
								url: '/pages/group/confirm_link_address-unpaid?orderPayId=' + this.dataInfo.data.id
							})
						}

					} else {
						uni.navigateBack()
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						});
					}
				}
			},
			// 学员列表
			// async getUserStudent() {
			//   const typeList = {camp: 1, spell: 2, shop: 3};
			//   //console.log('userInfo', this.userInfo)
			//   const data = await trainee.getStudentList({
			//     type: typeList[this.type],
			//     userId: this.userInfo.objectId,
			//     objectId: this.id,
			//     courseId: this.courseId
			//   });
			//   if (data.code === 0) {
			//     this.currentStudentList = data.data;
			//     console.log(this.currentStudentList, '=====this.currentStudentList')
			//   }
			// },
			// 优惠券列表
			// async getCouponList() {
			//   const typeList = {camp: 1, spell: 2, shop: 3};
			//   const data = await coupon.getCouponList({
			//     type: typeList[this.type],
			//     userId: this.userInfo.objectId,
			//     typeId: this.id,
			//     studentIds: this.studentList.map((item) => item.id).join(","),
			//   });

			//   if (data.code === 0) {
			//     this.currentCouponList = data.data.map((item) => {
			//       item.expirationTime = dayjs(item.expirationTime).format(
			//           "YYYY-MM-DD HH:mm"
			//       );
			//       return item;
			//     });
			//   }
			// },
			getUserStorage() {
				this.userInfo = uni.getStorageSync("userInfo");
				this.userId = this.userInfo.userId;
				this.objectId = this.userInfo.objectId;
				this.objectType = this.userInfo.objectType;
				this.token = uni.getStorageSync("token");
				this.teamLeaderId = uni.getStorageSync('teamLeaderId')
			},
			// 拼班详情
			async getSpellDetail() {
				try {
					uni.showLoading({
						title: "加载中..."
					});
					const data = await spell.getSchedulingDetails({
						schedulingDetailsId: this.id,
					});
					uni.hideLoading();
					if (data.code === 0) {
						this.courseId = data.data.courseId
						//this.getUserStudent();
						console.log('====this.getUserStudent()======');
						const current = data.data.userSchedulingDetailsVOList.find(
							(item) => +item.schedulingDetailsId === +this.id
						);
						const camp = this.campTypeState.find(
							(it) => +it.value === +current.schedulingState
						);
						data.data.campTypeStateText = camp ? camp.label : "";
						data.data.startTime = dayjs(data.data.startTime).format("YYYY-MM-DD");
						data.data.endTime = data.data.endTime ?
							dayjs(data.data.endTime).format("YYYY-MM-DD") :
							"暂无";
						data.data.originalPrice = common.conveYuan(data.data.originalPrice);
						data.data.equityPrice = common.conveYuan(data.data.equityPrice);
						this.detail = data.data;

						this.data.title = data.data.schedulingName;
						this.data.status = data.data.campTypeStateText;
						const dataList = [{
								icon: this.$pictureBaseUrl + '/static/imgs/date-icon.png',
								text: "",
								value: `${dayjs(current.actualClassDate).format("YYYY-MM-DD")} ${
                  current.actualClassTime
              }~${current.actualEndClassTime}`,
							},
							{
								icon: this.$pictureBaseUrl + '/static/imgs/address-icon.png',
								text: "",
								value: `${data.data.communityName}`,
							},
						];
						this.data.dataList = dataList;
						this.data.labelText = `总周期${data.data.frequency}周,当前第${current.schedulingNum}周`;
						this.data.labelInfo = `剩余${
              data.data.maxPersonNumber - current.objectUserStudentNum
          }名额拼满`;
					} else {
						uni.showToast({
							title: data.msg,
							duration: 2000,
							icon: "none"
						});
					}
				} catch (e) {
					uni.hideLoading();
					console.log(e);
					uni.showToast({
						title: e.msg,
						duration: 2000,
						icon: "none"
					});
				}
			},
			// 研学营详情
			async getCampDetail() {
				try {
					uni.showLoading({
						title: "加载中..."
					});
					const data = await camp.getCampDetail({
						studyCampId: this.id
					});
					uni.hideLoading();
					if (data.code === 0) {
						//this.getUserStudent();
						const camp = this.campTypeState.find(
							(it) => +it.value === data.data.campTypeState
						);
						data.data.campTypeStateText = camp ? camp.label : "";
						data.data.startTime = dayjs(data.data.startTime).format("YYYY-MM-DD");
						data.data.endTime = data.data.endTime ?
							dayjs(data.data.endTime).format("YYYY-MM-DD") :
							"暂无";
						this.detail = data.data;

						this.data.title = data.data.studyCampName;
						this.data.status = data.data.campTypeStateText;
						const dataList = [{
								icon: this.$pictureBaseUrl + '/static/imgs/time-icon.png',
								text: "开始时间",
								value: data.data.startTime
							},
							{
								icon: this.$pictureBaseUrl + '/static/imgs/time-icon.png',
								text: "结束时间",
								value: data.data.endTime,
							},
							{
								icon: this.$pictureBaseUrl + '/static/imgs/date-icon.png',
								text: "持续天数",
								value: data.data.durationDays,
							},
						];
						this.data.dataList = dataList;
					} else {
						uni.showToast({
							title: data.msg,
							duration: 2000,
							icon: "none"
						});
					}
				} catch (e) {
					uni.hideLoading();
					console.log(e);
					uni.showToast({
						title: e.msg,
						duration: 2000,
						icon: "none"
					});
				}
			},
			//请先选择需要加入拼班的学员
			openStudent() {
				this.showStudent = true;
				//调用新的学员列表接口
				this.getCourseEquityCardAndCouponListForStudentInfo();
			},

			//学员和优惠劵列表接口
			async getCourseEquityCardAndCouponListForStudentInfo() {
				const data = await trainee.getCourseEquityCardAndCouponListForStudentInfo({
					schedulingDetailsId: this.id,
					objectUserId: this.objectId
				});
				if (data.code === 0) {
					this.currentStudentList = data.data.studentInfoList.map(item => ({
						...item,
						couponList: item.availableCouponList.concat(item.notAvailableCouponList)
					}));
				}
			},

			// setStudent(payload) {
			//   this.studentList = payload;
			//   console.log('payload', payload)
			//   this.clearCoupon();
			//   //this.getCouponList();
			//   this.calcDiscount();
			// },
			// 计算优惠券优惠
			// calcCouponDiscount() {
			// 满减   两个都行
			// 折扣 是没有权益卡的
			// 定额 是没有权益卡的

			// let couponDiscount = 0;
			// this.priceList = this.studentList.map((item) => {
			//   return item.isEquityCard === 0
			//       ? this.detail.originalPrice
			//       : this.detail.equityPrice;
			// });
			// if (this.studentList.length > 0) {
			//   this.studentList.map((item) => {
			//     this.couponList.forEach((items) => {
			//       if (items.couponType === 1) {
			//         couponDiscount += item.reductionQuota;
			//       } else if (items.couponType === 2) {
			//         couponDiscount += this.detail.originalPrice - common.conveYuan(items.quota);
			//       } else if (items.couponType === 3) {
			//         if (item.isEquityCard === 0) {
			//           couponDiscount +=
			//               this.detail.originalPrice * (100 - items.discount) / 100;
			//         } else if (item.isEquityCard === 1) {
			//           couponDiscount +=
			//               this.detail.equityPrice * (100 - items.discount) / 100;
			//         }
			//       }
			//     })
			//   })
			/*
			const list = this.studentList.filter((item) => item.isEquityCard === 0);
			console.log('list', list)

			if (list.length > 0) {
			  this.couponList.forEach((item) => {
			    if (item.couponType === 1) {
			      couponDiscount += item.reductionQuota;
			    } else if (item.couponType === 2) {
			      couponDiscount += this.detail.originalPrice - common.conveYuan(item.quota);
			    } else if (item.couponType === 3) {
			      couponDiscount +=
			          this.detail.originalPrice * (100 - item.discount) / 100;
			    }
			  });
			} else {
			  this.couponList.forEach((item) => {
			    if (item.couponType === 1) {
			      couponDiscount += common.conveYuan(item.reductionQuota);
			    } else if (item.couponType === 2) {
			      couponDiscount += this.detail.equityPrice - common.conveYuan(item.quota);
			    } else if (item.couponType === 3) {
			      couponDiscount +=
			          (this.detail.equityPrice * (100 - item.discount) / 100);
			    }
			  });
			}
			           */
			// }
			// const number = this.studentList.filter(
			//     (item) => item.isEquityCard === 1
			// ).length;

			// const totalPrice =
			//     number * this.detail.equityPrice +
			//     (this.studentList.length - number) * this.detail.originalPrice;

			// this.couponDiscount =
			//     couponDiscount > totalPrice ? totalPrice : couponDiscount;
			// },
			// 计算权益卡优惠
			// calcDiscount() {
			//   const number = this.studentList.filter(
			//       (item) => item.isEquityCard === 1
			//   ).length;
			//   this.equityDiscount =
			//       number > 0
			//           ? number * this.detail.originalPrice -
			//           number * this.detail.equityPrice
			//           : 0;

			//   this.calcCouponDiscount();

			//   this.totalPrice =
			//       number * this.detail.equityPrice +
			//       (this.studentList.length - number) * this.detail.originalPrice -
			//       this.couponDiscount;
			// },
			// 删除学员
			deleteStudent(item) {
				if (this.studentList.length === 1) {
					uni.showToast({
						title: "至少需要一个学员",
						duration: 2000,
						icon: "none",
					});
					return;
				}
				const index = this.studentList.findIndex((it) => it.id === item.id);
				this.studentList.splice(index, 1);
				//this.clearCoupon();
				// this.getCouponList();
				//this.calcDiscount();
			},
			openCoupon() {
				// this.showCupon = true;
				if (this.studentList.length === 0) {
					uni.showToast({
						title: "请先选择学员",
						icon: "none",
						duration: 2000
					});
				} else {
					this.showCupon = true;
				}
			},
			setCoupon(payload) {
				this.couponList = payload;
				this.calcDiscount();
			},
			clearCoupon() {
				this.couponList = [];
				this.calcDiscount();
			},
			//确认选择
			confirmStudent() {
				if (this.checkedList.length > 0) {
					const result = this.currentStudentList.filter(
						(item) => this.checkedList.findIndex((it) => it === item.id) > -1
					);
					console.log(result, '=result====couponList')
					this.studentList = result;
					this.totalStudentPrice = this.studentList.map(item => item.totalPrice).reduce((total, num) => total +
						num, 0);
					this.totalStudentCouponPrice = this.studentList.map(item => item.totalCouponPrice).reduce((total,
						num) => total + num, 0);
					this.showStudent = false;
				} else {
					uni.showToast({
						title: `至少选择一个学员`,
						icon: "none",
						duration: 2000,
					});
				}
			},
			//新增学员
			addStudent() {
				common.goTo(`/pages/user/trainee/index?choose=1`);
			},
			choose(item) {
				const index = this.checkedList.findIndex((it) => it === item.id);
				console.log('选择!', index)
				if (index > -1) {
					this.checkedList.splice(index, 1);
				} else {
					this.checkedList.push(item.id);
				}
			},
			checkboxChange() {},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		height: 100%;
	}

	.order-item {
		background-color: #fff;
		border-radius: 20rpx;

		&:not(:first-child) {
			margin-top: 30rpx;
		}

		.hd {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding: 0 26rpx;
			background-image: linear-gradient(90deg, #eefee7, #fff);
		}

		.title {
			font-size: 28rpx;
			color: #000;
			padding: 0;
			//@include ellipsis(1);
		}

		.time {
			font-size: 20rpx;
			color: rgb(51, 51, 51);
		}

		.state {
			background-image: linear-gradient(-90deg, rgb(86, 239, 164), rgb(181, 252, 157));
			background-clip: text;
			font-size: 24rpx;
			line-height: 40rpx;
			color: transparent;
			display: flex;
			align-items: center;

			.icon {
				width: 28rpx;
				height: 28rpx
			}
		}

		.bd {
			//display: flex;
			//justify-content: space-between;
			padding: 20rpx;
			//align-items: center;
		}

		.fd {
			padding: 20rpx 30rpx;
			border-top: 2rpx solid #efefef;
			display: flex;
			justify-content: flex-end;
		}

		.week {
			margin-bottom: 10rpx;
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			align-items: center;


			.label {}

			.price {
				font-size: 32rpx;
				font-weight: 500;
			}

			//text {
			//  line-height: 40rpx;
			//  font-size: 24rpx;
			//  color: rgb(51, 51, 51);
			//}
		}

		.intro {
			display: flex;
			align-items: center;
			flex: 1;
			//min-width: 0;
			//line-height: 50rpx;
			font-size: 24rpx;
			color: rgb(91, 91, 91);
			min-width: 80%;

			.icon {
				display: block;
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}

		.about {
			margin-right: 40rpx;
		}

		.people {
			font-size: 24rpx;
			color: rgb(168, 168, 168);
		}

		.imgs {
			display: block;
			float: right;
			width: 132rpx;
			height: 116rpx;
		}

		.ft {
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 1rpx;
				background-color: #eee;
			}
		}

		.matter {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 10rpx 20rpx;
			line-height: 60rpx;

			.moudle {
				margin-left: 20rpx;
				font-size: 20rpx;
				color: rgb(51, 51, 51);

				text {
					margin-left: 6rpx;
					font-size: 28rpx;
					color: rgb(0, 0, 0);
				}
			}
		}
	}

	.confirm-page {
		min-height: 100%;
		padding: 24rpx 0;
		background: linear-gradient(180deg, #dcffec, #fafafb 46.565%, #fff 100%);

		.head-content {
			.headBox {
				.textTop {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
				}

				.textBom {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #525252;
				}
			}
		}


		.wrap {
			padding: 0 36rpx;
		}

		.detail {
			// margin-top: 36rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 32rpx 36rpx;
			box-sizing: border-box;

			.detail-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #000;
				font-size: 28rpx;
			}

			.choose-box {
				margin: 28rpx 0 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 84rpx;
				padding: 0 28rpx;
				background: rgb(248, 248, 250);
				border-radius: 24rpx;
				font-size: 28rpx;
				color: #858585;

				.icon {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.checked-list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.price-info {
					padding: 32rpx;
					border-radius: 24rpx;
					border: 2rpx solid rgb(239, 239, 239);
					margin-top: 24rpx;

					.head {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						border-radius: 20rpx 20rpx 0 0;
						padding: 0 26rpx;
						background-image: linear-gradient(90deg, #eefee7, #fff);
					}

					.price-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;
						margin: 30rpx;


						&.coupon {
							.info {
								.icon {
									width: 35rpx;
									height: 30rpx;
									margin-left: 2rpx;
								}
							}
						}

						.info {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.icon {
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
							}

							.text {
								color: #000;
								font-size: 24rpx;
							}
						}

						.coupon-box {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.icon {
								width: 24rpx;
								height: 24rpx;
								margin-left: 16rpx;
							}
						}

						.price {
							color: #858585;
							font-size: 24rpx;

							&.red {
								color: #ff0000;
							}
						}

						.label {
							padding: 0 16rpx;
							color: #b26613;
							background: rgb(254, 223, 159);
							height: 36rpx;
							font-size: 20rpx;
							border-radius: 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.total {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						padding: 24rpx 0 0;
						border-top: 2rpx solid #eee;
						color: #000;
						font-size: 24rpx;

						.text {
							color: #44e095;
							margin-right: 16rpx;
						}
					}
				}
			}

			.checked-list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.checked-item {
					padding: 0 16rpx 0 32rpx;
					color: #000;
					font-size: 24rpx;
					height: 64rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #e3fdf0;
					border-radius: 24rpx;
					margin-right: 28rpx;

					&:last-child {
						margin-right: 0;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-left: 28rpx;
					}

					.price-info {
						padding: 32rpx;
						border-radius: 24rpx;
						border: 2rpx solid rgb(239, 239, 239);
						margin-top: 24rpx;

						.head {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 80rpx;
							border-radius: 20rpx 20rpx 0 0;
							padding: 0 26rpx;
							background-image: linear-gradient(90deg, #eefee7, #fff);
						}

						.price-item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 24rpx;


							&.coupon {
								.info {
									.icon {
										width: 35rpx;
										height: 30rpx;
										margin-left: 2rpx;
									}
								}
							}

							.info {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.icon {
									width: 40rpx;
									height: 40rpx;
									margin-right: 8rpx;
								}

								.text {
									color: #000;
									font-size: 24rpx;
								}
							}

							.coupon-box {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.icon {
									width: 24rpx;
									height: 24rpx;
									margin-left: 16rpx;
								}
							}

							.price {
								color: #858585;
								font-size: 24rpx;

								&.red {
									color: #ff0000;
								}
							}

							.label {
								padding: 0 16rpx;
								color: #b26613;
								background: rgb(254, 223, 159);
								height: 36rpx;
								font-size: 20rpx;
								border-radius: 8rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						.total {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							padding: 24rpx 0 0;
							border-top: 2rpx solid #eee;
							color: #000;
							font-size: 24rpx;

							.text {
								color: #44e095;
								margin-right: 16rpx;
							}
						}
					}
				}
			}

			.tips {
				margin-top: 24rpx;
				color: #858585;
				font-size: 24rpx;
				line-height: 40rpx;
				padding: 0 16rpx;
			}

			.tools {
				display: flex;
				flex-direction: column;
				padding: 32rpx;
				gap: 24rpx;
				
				.button {
					width: 100%;
					height: 88rpx;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s;
					
					&.confirm {
						background: linear-gradient(135deg, #4CAF50, #45A049);
						color: #fff;
						box-shadow: 0 4rpx 12rpx rgba(76,175,80,0.3);
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 6rpx rgba(76,175,80,0.2);
						}
					}
					
					&.upgrade {
						background: linear-gradient(135deg, #FF9800, #F57C00);
						color: #fff;
						box-shadow: 0 4rpx 12rpx rgba(255,152,0,0.3);
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 6rpx rgba(255,152,0,0.2);
						}
					}
					
					&.renew {
						background: linear-gradient(135deg, #2196F3, #1976D2);
						color: #fff;
						box-shadow: 0 4rpx 12rpx rgba(33,150,243,0.3);
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 6rpx rgba(33,150,243,0.2);
						}
					}
				}
			}

			.agree {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 32rpx;
				color: #666;
				font-size: 28rpx;
				
				.text {
					color: #4CAF50;
					margin-left: 8rpx;
				}
			}
		}
	}

	.student-list-popup {
		.info {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
			justify-content: space-between;
			gap: 20rpx;
			padding-top: 20rpx;
		}

		//height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100vh;

		.student-header {
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 2rpx solid rgb(237, 237, 237);

			.student-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #000;
			}

			.close {
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				top: 28rpx;
				right: 28rpx;

				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}

		.student-main {
			flex: 1;
			position: relative;
			overflow: hidden;

			/deep/ .u-checkbox-group {
				height: 100%;
				overflow: hidden;
			}

			.student-list {
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				//height: 50vh;
				//overflow-y: auto;
				height: 100%;

				.list-content {
					padding: 30rpx 0;
				}

				.student-item {
					padding: 26rpx 36rpx;
					border-radius: 24rpx;
					background: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32rpx;
					gap: 40rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.info {
						flex: 1;

						.info-title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							gap: 16rpx;

							.title {
								font-size: 48rpx;
								font-weight: 600;
								display: inline-block;
								margin-right: 16rpx;
								vertical-align: baseline;
								color: rgb(51, 51, 51);
							}

							.label {
								align-items: center;
								color: #858585;
								font-size: 24rpx;
							}

							.desc {
								color: #858585;
								font-size: 20rpx;
								border: 1rpx solid rgb(133, 133, 133);
								padding: 8rpx 16rpx;
								border-radius: 8rpx;
							}
						}

						.info-detail {
							display: flex;
							align-items: baseline;
							gap: 8rpx;
						}

						.price-content {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin: 16rpx 0;

							.desc {
								display: inline-block;
								margin-right: 16rpx;
							}

							.label {
								color: rgb(51, 51, 51);
								font-size: 24rpx;
								display: inline-block;
								margin-right: 8rpx;
							}

							.price {
								color: rgb(133, 133, 133);
								font-size: 24rpx;

								&:after {
									content: '元';
								}
							}
						}

						.result-price {
							justify-content: start;
							gap: 40rpx;

							.result-count {}

							.price {
								font-weight: 500;
								font-size: 28rpx;
								color: #f00;
							}
						}
					}
				}
			}
		}

		.tools {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-top: 80rpx;
			padding: 20rpx 32rpx;
			padding-bottom: env(safe-area-inset-bottom);

			.button {
				flex: 1;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(270deg,
						rgb(86, 239, 164),
						rgb(181, 252, 157) 100%);
				color: #000;
				font-size: 28rpx;
				border-radius: 24rpx;
				margin-right: 60rpx;

				&:last-child {
					margin-right: 0;
				}

				&.cancel {
					background: rgb(0, 0, 0);

					.text {
						background: linear-gradient(270deg,
								rgb(86, 239, 164),
								rgb(181, 252, 157));
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}
			}
		}
	}
</style>